<!-- 商家，代理商信息表单弹窗 -->

<form id="business-form" lay-filter="business-form"
	class="layui-form model-form"
	style="overflow: auto; height: 500px; width: 90%;">
	<input name="id" type="hidden" />


	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商家名称</label>
		<div class="layui-input-inline">
			<input name="name" placeholder="请输入代理商（商家）名称" type="text"
				class="layui-input" maxlength="20" id="name" lay-verify="required"
				required />
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">联系人</label>
		<div class="layui-input-inline">
			<input name="contact" placeholder="请输入联系人" type="text"
				class="layui-input" maxlength="20" id="contact"
				lay-verify="required" required />

		</div>
	</div>


	<div class="layui-form-item">
		<label class="layui-form-label">联系手机</label>
		<div class="layui-input-inline">
			<input type="tel" name="phone" lay-verify="required|phone" id="phone"
				placeholder="请输入联系电话"   autocomplete="off" class="layui-input">
		</div>
	</div>


 

	<div class="layui-form-item">
		<label class="layui-form-label">地区</label>
			<div class="layui-input-block"   >
		   <input type="text"  name="area" id="area" onready="true" class="layui-btn layui-btn-normal" readonly="readonly" lay-verify="required" required  >  
		   </div>
		<div class="layui-input-inline  province_city" style="display:none">
			<select   id="province" lay-filter="province">
				<option value="">请选择省</option>

			</select>
		 </div>
		 		<div class="layui-input-inline  province_city" style="display:none">
			<select   id="city" lay-filter="city">
				<option value="">请选择市</option>

			</select>
		 </div>
		 		<div class="layui-input-inline  province_city" style="display:none">
			<select   id="district" lay-filter="district">
				<option value="">请选择县/区</option>

			</select>
			</div>
		</div>

	</div>

	<div class="layui-form-item">
	
	<label class="layui-form-label">商家地址</label>
		<div class="layui-input-block">
			<input name="address" placeholder="请输入联系地址" type="text"
				class="layui-input" maxlength="20" id="address"
				lay-verify="required" required   />
		 
     	</div> 
     	<br>
		<label class="layui-form-label">经纬度</label>
		<div class="layui-input-inline">
			<input name="longitude" placeholder="经度" type="number"
				class="layui-input"   id="longitude"
				lay-verify="required" required readonly="readonly"  />
		</div>

	 
		<div class="layui-input-inline">
			<input name="latitude" placeholder="纬度" type="number"
				class="layui-input"   id="latitude"
				lay-verify="required" required  readonly="readonly" />
		</div>
		
		 
		
	</div>

		<div class="layui-form-item">
			<label class="layui-form-label">地图</label>
			<div class="layui-input-inline">
				<div id="mapContainer" style="width:400px;height:400px;"   ></div>
			</div>
			
			<div class="layui-input-inline" style="margin-left:205px">
			<input     type="text" class="layui-btn layui-btn-primary  layui-btn-sm"   id="location" style="margin:0"  readonly="readonly"  />
			<input  placeholder="经度" type="number" class="layui-btn layui-btn-primary layui-btn-sm"   id="lon"  style="margin:0"   readonly="readonly"  />
			<input    placeholder="纬度"  type="number" class="layui-btn layui-btn-primary layui-btn-sm"   id="lat"  style="margin:0"   readonly="readonly" />
			 <input type="button"    id="buildLocation" onready="true" class="layui-btn layui-btn-normal layui-btn-sm"  style="margin:0"  value="绑定地址"  /> 
			
			</div>
		</div>
		
		
          <br>
		<div class="layui-form-item">
			<label class="layui-form-label">商家类型</label>
			<div class="layui-input-block">
				<input type="radio" name="payType" value="1" title="付费" >
				<input type="radio" name="payType" value="2" title="免费" > 
				<input type="radio" name="payType" value="3" title="试用" >
			</div>
		</div>


		<div class="layui-form-item">
			<label class="layui-form-label">有效期</label>
			<div class="layui-input-inline">

				<input type="text" name="effectTime" id="effectTime" lay-verify="datetime"
					placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>
		</div>




		<div class="layui-form-item">
			<label class="layui-form-label">营业开始时间</label>
			<div class="layui-input-inline">
				<input name="shopHourStart" placeholder="请输入营业开始时间" type="text"
					class="layui-input" maxlength="20" id="shopHourStart"
					lay-verify="required" required />
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">营业结束时间</label>
			<div class="layui-input-inline">
				<input name="shopHourEnd" placeholder="请输入营业结束时间" type="text"
					class="layui-input" maxlength="20" id="shopHourEnd"
					lay-verify="required" required />
			</div>
		</div>
		
		<div class="layui-form-item">	
			<label class="layui-form-label">logo</label>
			<div class="layui-input-block">
			<div class="layui-upload">
			  <button type="button" class="layui-btn" id="uploadBtn">上传</button>
			  <input name="logo" id ="logo" type="hidden"   />
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="uploadImg" style="width:120px">
			    <p id="uploadText"></p>
			  </div>
			</div>   
			</div>
			</div>
			
			<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">

				<input type="radio" name="status" value="1" title="启用" checked="">
				<input type="radio" name="status" value="0" title="禁用">
			</div>
		</div>

			

		<div class="layui-form-item model-form-footer" >
			<button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button"  >取消</button>
			<button class="layui-btn" lay-filter="business-form-submit" lay-submit style="margin-right:45%" >保存</button>
		</div>
</form>

<script>
var map=null ;
var lon=null;
var lan=null;
var admin;

function myFun(result){
    var cityName = result.name;
    map.centerAndZoom(cityName,17);  
}
window.initBMAPGL = function (){
 	  if(map!=null)return;
	  map = new BMap.Map("mapContainer");            // 创建Map实例
	  var myCity = new BMap.LocalCity();
	  var geoc = new BMap.Geocoder();
	  myCity.get(myFun);
	  map.enableScrollWheelZoom(); 
	
	  map.addEventListener('tilesloaded', function (e) {
		 if(lon!=null&&lan!=null){
				setNewCenter(lon,lan);
				lon=null;lan=null;	
			    map.addOverlay(new BMap.Marker(map.getCenter())); 
			    geoc.getLocation(map.getCenter(), function(rs){
			    admin.showPoint(map.getCenter(),rs.addressComponents);
		       })
		 }
  
      });
	map.addEventListener('click', function (e) {
		  map.clearOverlays();
		  map.addOverlay(new BMap.Marker(e.point)); 
		  geoc.getLocation(e.point, function(rs){
			    admin.showPoint(e.point,rs.addressComponents);
		   }) 
	 
	});
  }
    
    function loadJScript() {
    	var script = document.createElement("script");
    	script.type = "text/javascript";
    	script.src = "//api.map.baidu.com/api?v=2.0&ak=gaps7QT8wKLxWPAKHldsyBo4GNR7SGX6&callback=initBMAPGL";
    	document.body.appendChild(script);
    }
    
    function setNewCenter(lng,lat) {
    	if(map==null){
    		lon=lng;
    		lan=lat;
    		return;
    	}
        var point = new BMap.Point(lng, lat);
        map.setCenter(point);   // 设置地图中心点
    	var marker = new BMap.Marker(point);
    	map.addOverlay(marker); 
    }
 
 
	layui.use(['laydate', 'layer', 'admin', 'form', 'formSelects','upload','config'  ],function() {
		var layer = layui.layer;
		  admin = layui.admin;
		var form = layui.form;
		var formSelects = layui.formSelects;
		var laydate = layui.laydate;
		var upload = layui.upload;
		var config = layui.config;
		loadJScript();
		var area = null;
		  laydate.render({   elem: '#effectTime',type: 'datetime' });
		  //时间选择器
		  laydate.render({
		    elem: '#shopHourStart'
		    ,type: 'time'
		  });
		  //时间选择器
		  laydate.render({
		    elem: '#shopHourEnd'
		    ,type: 'time'
		  });
		form.on('select(province)',function(data) {
			$("#district") .html("<option value=''>选择区</option>")
			$("#city").html("<option value=''>选择市</option>")
			if (data.value == undefined|| data.value == "")return;
			for ( var i in area) {
				if (area[i].area == data.value) {
					for ( var j in area[i].sonList) {
						$("#city").append("<option value='"+area[i].sonList[j].area+"'>"
												+ area[i].sonList[j].area
												+ "</option>");
				 }}
			}
			form.render();
		})
		
			form.on('select(city)',function(data) {
			if (data.value == undefined|| data.value == "")
				return;
			$("#district").html("<option value=''>选择区(镇)</option>")
			for ( var i in area) {
				for ( var j in area[i].sonList) {
					if (area[i].sonList[j].area == data.value) {
						for ( var k in area[i].sonList[j].sonList) {
							$("#district").append("<option value='"+area[i].sonList[j].sonList[k].area+"'>"
													+ area[i].sonList[j].sonList[k].area
													+ "</option>");
						}
					}
				}
			}
			form.render();
		 
		})
		admin.setPoint=function  (e,loc){
			//$("#longitude").val(e.lng);
			//$("#latitude").val(e.lat);
			//$("#address").val(loc.district+"-"+loc.street+" "+loc.streetNumber);	
			//$("#area").val(loc.province+loc.city+loc.district);	
		 
			form.render();
		}
		
		admin.showPoint=function  (e,loc){
			$("#lon").val(e.lng);
			$("#lat").val(e.lat);
			$("#location").val(loc.province+loc.city+loc.district+"--"+loc.district+"-"+loc.street+" "+loc.streetNumber);	 
			form.render();
		}
		
		$("#buildLocation").click(function(){
			$("#area").val($("#location").val().split("--")[0]);
			$("#address").val($("#location").val().split("--")[1]);
			$("#longitude").val($("#lon").val());
			$("#latitude").val($("#lat").val());
			form.render();
		})

		
			form.on('select(district)',function(data) {
				$("#area").val(data.value);
				$(".province_city").css("display","none");
				form.render();
			
			})
			
			$("#area").click(function(){
				$(".province_city").css("display",$(".province_city").css("display")=="block"?"none":"block");
				form.render();
			})
		
		//普通图片上传
	  var uploadInst = upload.render({
		    elem: '#uploadBtn'
		    ,url: config.base_server+'file/simditorUpVedioFile'  //改成您自己的上传接口
		    ,before: function(obj){
		      //预读本地文件示例，不支持ie8
		      obj.preview(function(index, file, result){
		        $('#uploadImg').attr('src', result); //图片链接（base64）
		      });
		      layer.load(2); 
		    }
		    ,done: function(res){
		    	 layer.closeAll('loading');
		      //如果上传失败
		      if(res.code > 0){
		        return layer.msg('上传失败');
		      }
		      //上传成功
		      $("#logo").val(res.data.file_path);
		    }
		    ,error: function(){
		    	 layer.closeAll('loading');
		      //演示失败状态，并实现重传
		      var demoText = $('#demoText');
		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		      demoText.find('.demo-reload').on('click', function(){
		        uploadInst.upload();
		      });
		    }
	  });
  
		area = admin.getTempData('t_area')
		if (!area ) {
			layer.load(2);
			admin.req('/common/areaList', {}, function(data) {
				layer.closeAll('loading');
				if (data.code == 0) {
					layer.msg(data.msg, { icon : 1, time : 500 	});
					area = data.data;
					admin.putTempData("t_area", area);
				} else {
					layer.msg(data.msg, { icon : 2, time : 500 });
				}
				initArea();
			}, "get");
		} else {
			initArea();
		}
		function initArea() {
			$("#province") .html("<option value=''>选择省</option>")
			$("#city").html("<option value=''>选择市</option>")
			$("#district") .html("<option value=''>选择区</option>")
			for ( var i in area) {
				$("#province").append( "<option value='"+area[i].area+"'>" + area[i].area + "</option>");
			}
			form.render();
		}

		var business = admin.getTempData('t_business');
		console.log(business);
		if (business.method.startWith("update")) {
		 
			setNewCenter(business.longitude,business.latitude) ;
			//form.val('business-form', business);
			$("#uploadImg").attr("src",business.logo)
			admin.formLoad('#business-form',business)
			form.render();
		}
		admin.putTempData('t_business',null);
		// 表单提交事件
		form.on('submit(business-form-submit)', function(data) {
			layer.load(2);
		 
			admin.req('business/business/' + business.method, JSON.stringify(data.field), function(data) {
				layer.closeAll('loading');
				if (data.code == 0) {
					layer.msg(data.msg, { icon : 1, time : 500 });
					admin.finishPopupCenter();
				} else {
					layer.msg(data.msg, { icon : 2, time : 500 });
				}
			}, "post");
			return false;
		});
	});
</script>
